import React, { Component } from 'react'
import { WingBlank, Card, WhiteSpace } from 'antd-mobile'
import PropTypes from 'prop-types'
import { withRouter }  from 'react-router-dom'
import QueueAnim from 'rc-queue-anim'; // 引入进出场动效组件

// 获取card的子组件
const {Header, Body} = Card

// 根据指定用户类型显示用户列表
class UserList extends Component {
  // 定义组件所必须的props
  static propTypes = {
    userList: PropTypes.array.isRequired,
  }
  
  render () {
    
    const {userList} = this.props
    // console.log(userList)
    return (
      // 两翼留白 卡片式的效果
      <WingBlank className={'userlist'}>
        {/*遍历userList 生成用户列表表格*/}
        <QueueAnim type={'scale'} >
          {userList.map(value => (
            <div key={value._id} className={"userlist-item"}>
              <WhiteSpace />
              {/*卡片组件 点击卡片跳转到聊天页面*/}
              <Card onClick={ () => this.props.history.push(`/chat/${value._id}`)   }>
                {/*卡片头部  用户没有头像的话给一个默认的*/}
                <Header
                  thumb={`/images/headers/${value.header || '头像1'}.png`}
                  extra={value.username}
                >
                </Header>
                {/*卡片的主题body*/}
                <Body  >
                <p>
                  {value.type === 'boss'? '招聘岗位： ' :'应聘职位： ' } {value.post}
                </p>
                {value.company ? <p>公司名称： {value.company}</p> : null}
                {value.salary ? <p>{value.type === 'boss'? '提供' :'期望' }薪资： {value.salary}</p> : null}
                <p>详细描述：{value.info}</p>
                </Body>
              </Card>
            </div>
  
          ))}
        </QueueAnim>
       
      
      </WingBlank>
    )
  }
}

export default   withRouter(UserList)